@charset "utf-8";
$font-size: 28px; //定义根字体大小
@function r($px) {
    @return $px/$font-size*1rem;
}
@mixin over_normal{
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
@mixin over_nowrap{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
$color: #999;

.web {
    width: 100%;
    height: 100%;
    background: #f3f4f6;
    header {
        width: 100%;
        height: r(90px);
        position: relative;
        top: 0;
        background: #f7f7f7;
        border-bottom: 1px solid #c1c1c1;
        padding: r(14px) r(20px) r(16px);
        line-height: r(60px);
        text-align: center;
        i {
            font-size: r(38px);
            color: #848689;
            font-weight: bold;
        }
        .nav-name {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: r(35px);
            color: #333333;
            @include over_nowrap;
        }
        .send {
            font-size: r(30px);
            color: #666666;
        }
    }
    //内容
    section {
        width: 100%;
        position: absolute;
        top: r(90px);
        bottom: 0;
        overflow: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        .list {
            width: 100%;
            height: r(237px);
            border-bottom: r(1px) solid #e0e0e0;
            padding: r(17.9px) r(10px) r(17.9px) r(20px);
            position: relative;
            //复选框
            .correct {
                position: absolute;
                font-size: r(25px);
                color: #f3f4f6;
                top: r(93px);
                left: r(27px);
            }
            input[type=checkbox] + label {
                width: r(36px);
                height: r(36px);
                border-radius: 50%;
                margin-right: r(18px);
                margin-top: r(83.2px);
            }
            [id^="check-"] + label {
                border: 1px solid #666666;
                display: inline-block;
            }
            [id^="check-"]:checked + label {
                background-color: #d62d31;
                border: 1px solid #d62d31;
            }
            .list-img {
                width: r(200px);
                height: r(200px);
                line-height: r(237px);
                margin-right: r(15px);
                img {
                    width: 100%;
                }
            }
            .list-name {
                font-size: r(27px);
                height: r(80px);
                line-height: r(40px);
                word-break: break-all;
                @include over_normal;
                a {
                    color: #666666;
                }
            }
            span {
                line-height: r(55px);
                font-size: r(22px);
                color: $color;
                em {
                    @include over_nowrap;
                    display: inline-block;
                    vertical-align: bottom;
                }
            }
            .info_pr {
                @include over_nowrap;
                .repertory-number>em {
                    max-width: r(39px);
                }
            }
            .selling-price {
                overflow: hidden;
                white-space: nowrap;
                color:$color;
                em {
                    font-size: r(30px);
                    color: #d62d31;
                    max-width: r(100px);
                }
            }
        }
    }
}
//媒体查询
@media screen and (min-width:320px) {
    html {
        font-size: 14px;
    }
}
@media screen and (min-width:360px) {
    html {
        font-size: 16px;
    }
}
@media screen and (min-width:375px) {
    html {
        font-size: 16.5px;
    }
}
@media screen and (min-width:414px) {
    html {
        font-size: 18px;
    }
}